Групове заняття 2

Тема 1: Середовище для проведення аналізу та обробки масивів даних

Заняття 3: Jupyter Notebook. Робота з чарунками типу Markdown

Результати заняття

(слухач зможе)

1. Створювати посилання та вставляти зображення користуючись розміткою Markdown.
2. Створювати діаграми та будувати графіки користуючись розміткою Markdown.

НАВЧАЛЬНИЙ ЧАС: 2 години.

Навчальна література:

1. Путівник по Markdown [Електронний ресурс] – Режим доступу до ресурсу: https://markdown.rozh2sch.org.ua/.
2. What is Markdown? [Електронний ресурс] – Режим доступу до ресурсу: https://www.markdownguide.org/getting-started/

ПЛАН ЗАНЯТТЯ

Навчальне питання 1. Робота з посиланнями та зображеннями

На попередньому занятті було розглянуто можливості Markdown щодо форматування тексту, створення таблиць та списків. Це дозволяє підвищити читабельність тексту та можливість акцентування та узагальнення інформації.

1.1 Посилання

Якщо документ, що створюється, передбачає доступ до мережі інтернет, є можливість створення посилань на відповідні ресурси:

Введено:

1. [Посилання](https://google.com.ua)
2. [Посилання, при наведенні на яке висвічується введений текст ](https://google.com.ua "Це пошукова система")
3. Тут використовуються винесені [посилання], що доцільно щоб не захаращувати [основний] текст

[посилання]: https://google.com.ua
[основний]: https://google.com.ua "підказка"

Отримано:

1. Посилання
2. Посилання, при наведенні на яке висвічується введений текст
3. Тут використовуються винесені посилання, що доцільно щоб не захаращувати основний текст

Для зручної роботи з великими документами є можливість створення внутрішніх посилань на відповідні частини документу

Введено:

[Заголовок питання, що розглядається](#навчальне-питання-1-робота-з-посиланнями-та-зображеннями)

Отримано:
Заголовок питання, що розглядається

Продовжуючи знайомство з Markdown, розглянемо можливість розміщення зображень у документі.

1.2 Зображення

У текст, що створюється за допомогою мови розмітки Markdown, є можливість вставляти картинки, які можуть бути розміщені як на віддалених серверах, так і на локальному ПЕОМ. Для використання файлів картинок, розміщених на локальному ПЕОМ необхідно надавати посилання на відповідну теку, де вони знаходяться. Ось приклад таких дій:

Введено:

![Текст заміщення картинки](./fig_3_1.avif "Тут вказана назва картинки")

Отримано:

Рис. 1.1

Синтаксис такого запису передбачає наступну конструкцію:

• ![alt] - де alt текст який буде виводитися якщо картинка з будь-яких причин не може бути завантажена;
• (arg_1 arg_2) - arg_1 - відносний / абсолютний шлях до файлу з картинкою, arg_2 - текст, який буде показуватися при наведенні на картинку курсором.

Крім статичних картинок є можливість виведення і анімованих картинок, типу *.gif

Введено:

![alt](media/monkey-kid-coding.gif "Тут вказана назва картинки")

Отримано:

Рис. 1.2

У випадку необхідності змінити розмір зображення необхідно застосовувати правила мови розмітки HTML

Введено:

// Тут зображення виводиться за замовчуванням по лівому краю сторінки
<img src="./fig_3_1.avif" height="100" alt="Тут вказана назва картинки" />

// Для виведення зображення по центру потрібно ввести додатковий контейнер
<div style="display:flex;justify-content:center;">
  <img src="./fig_3_1.avif" alt="Тут вказана назва картинки" />
</div>

Отримано:

Рис. 1.3

При застосуванні додаткового контейнеру:

Рис. 1.4

За необхідності зображення може бути посиланням, яке працює за розглянутими вище правилами. Для цього вираз на виведення картинки вкладається у квадратні дужки виразу, що описує посилання

Введено:

[![alt](./fig_3_1.avif "Тут вказано назва переходу за посиланням")](#посилання)

Отримано:

Практичне завдання 1

1. Створити документ, який містить опис та посилання у вигляді логотипу на сайт військового інституту, а також опис і посилання на сайт кафедри.
2. При розробці документу використати форматування для власних назв.

Навчальне питання 2. Робота з діаграмами та графіками

Робота з графікою

Для роботи з графікою одним із способів є застосування синтаксису застосунку Mermaid. У випадку роботи у редакторі VS Code необхідно встановити розширення Markdown Preview Mermaid Support, що дозволяє переглянути результати введення.

Рис. 1.5.

Mermaid передбачає використання кількох типів графічних відображень. Розглянемо деякі з них. Синтаксис для створення графічних схем достатньо простий, для цього код для побудови запланованого зображення записується у потрійні зворотні лапки,наприклад:

Введено:

```mermaid
flowchart TD

A --> B;
A --- C;
A --o D;
A <--> E;
```

Отримано:

flowchart TD

A --> B;
A --- C;
A --o D;
A <--> E;

Рис. 1.6.

Для цього у потрійних лапках пишеться, що це фрагмент для обробки розширенням mermaid, а також тип схеми flowchart. Надалі описуються відповідного типу зв'язки між сутностями (A, B, C, D, E).

Символи, що вводяться, можна розширити більш змістовними описами. Для цього після символу у квадратних дужках пишеться текст:

Введено:

```mermaid
flowchart TD

A[об'єкт] --> B;
A --- C;
A --o D;
A <--> E;
```

Отримано:

flowchart TD

A[об'єкт] --> B;
A --- C;
A --o D;
A <--> E;

Рис. 1.7.

Прямокутники, які виводяться за замовчуванням, можна змінити іншими фігурами. Список наведено нижче:

Введено:

```mermaid
flowchart TD

A --> B[[B]];
A --- C(C);
A --o D((D));
A <--> E{E};
A --x F[(F)];
A --- G[/G\];
A --- J[/J/];
A --- K[\K/];
A --- L[L];
```

Отримано:

flowchart TD

A --> B[[B]];
A --- C(C);
A --o D((D));
A <--> E{E};
A --x F[(F)];
A --- G[/G\];
A --- J[/J/];
A --- K[\K/];
A --- L[L];

Рис. 1.8.

За необхідності напрямок потоку, який вказується після службового слова flowchart наприклад:

Введено:

```mermaid
flowchart LR

A[об'єкт] --> B;
A --- C;
```

Отримано:

flowchart LR

A[об'єкт] --> B;
A --- C;

Рис. 1.9.

Що відповідає наступному:

• TB - зверху до низу;
• BT - знизу до гори;
• LR - зліва направо;
• RL - зправа наліво.

Лінії, які з'єднують також можуть бути різними:

Введено:

```mermaid
flowchart LR

A -.-> B;
A === C;
A ~~~ D;
```

Отримано:

flowchart LR

A -.-> B;
A === C;
A ~~~ D;

Рис. 1.10.

Для ліній зв'язку також передбачено введення коментарів:

Введено:

```mermaid
flowchart LR

A -. Коментар .-> B;
A == коментар === C;
A -- коментар --> D;
```

Отримано:

flowchart LR

A -. Коментар .-> B;
A == коментар === C;
A -- коментар --> D;

Рис. 1.11.

За необхідності введені фігури можуть бути посиланнями, а також відображати при наведенні курсором текст

Введено:

```mermaid
flowchart LR

A -. Коментар .-> B;
A == коментар === C;

click A callback "Відображення тексту"
click B href "#посилання"
```

Отримано:

flowchart LR

A -. Коментар .-> B;
A == коментар === C;

click A callback "Відображення тексту"
click B href "#посилання"

Рис. 1.12.

Використовуючи такий тип графіки є можливість створення алгоритму

Введено:

```mermaid
flowchart TD
    A[Початок] --> B{Це воно?}
    B -->|Так| C[Добре]
    C --> D[Обдумати]
    D --> B
    B ---->|Ні| E[Завершення]
```

Отримано:

flowchart TD
    A[Початок] --> B{Це воно?}
    B -->|Так| C[Добре]
    C --> D[Обдумати]
    D --> B
    B ---->|Ні| E[Завершення]

Рис. 1.13.

У нових версіях діаграм типу flowchart з'явилася можливість відображення додаткових форм фігур link. При цьому ускладнився синтаксис опису фігури, що складається із двох частин - форма (shape) та надпис (label). Функціональність залишається, а саме можливість встановлення зв'язків між сутностями та інше.

Введено:

```mermaid
flowchart LR

    A@{ shape: manual-file, label: "File Handling"}
    B@{ shape: manual-input, label: "User Input"}
    C@{ shape: docs, label: "Multiple Documents"}
    D@{ shape: procs, label: "Process Automation"}
    E@{ shape: paper-tape, label: "Paper Records"}

click E callback "Відображення тексту"
```

Отримано:

flowchart LR

    A@{ shape: manual-file, label: "File Handling"}
    B@{ shape: manual-input, label: "User Input"}
    C@{ shape: docs, label: "Multiple Documents"}
    D@{ shape: procs, label: "Process Automation"}
    E@{ shape: paper-tape, label: "Paper Records"}

click E callback "Відображення тексту"

Рис. 1.14.

Mermaid пропонує і інші типи діаграм, які можна використовувати, наприклад типу pie

Введено:

```mermaid
pie title Індекс за версією TIOBE (січень 2025)
    "Python" : 23.28
    "C++" : 10.29
    "C" : 8.86
    "C#" : 4.45
    "JavaScript" : 4.20
    "Інші": 48.92
```

Отримано:

pie title Індекс за версією TIOBE (січень 2025)
    "Python" : 23.28
    "C++" : 10.29
    "C" : 8.86
    "C#" : 4.45
    "JavaScript" : 4.20
    "Інші": 48.92

Рис. 1.15.

Є можливість також відображати дані у стовпцях, тип діаграми xychart-beta

Введено:

```mermaid
---
config:
    xyChart:
        width: 700
        height: 400
    themeVariables:
        xyChart:
            titleColor: "#f3456"
            plotColorPalette: "#f3456, #ff0000"
---
    xychart-beta
    title "Індекс за версією TIOBE (січень 2025)"
    x-axis [Python, C++, C, C#, JS]
    y-axis "Відсоток, %" 0 --> 30
    bar [23.28, 10.29, 8.86, 4.45, 4.20]
    line [23.28, 10.29, 8.86, 4.45, 4.20]
```

Отримано:

---
config:
    xyChart:
        width: 700
        height: 400
    themeVariables:
        xyChart:
            titleColor: "#f3456"
            plotColorPalette: "#f3456, #ff0000"
---
    xychart-beta
    title "Індекс за версією TIOBE (січень 2025)"
    x-axis [Python, C++, C, C#, JS]
    y-axis "Відсоток, %" 0 --> 30
    bar [23.28, 10.29, 8.86, 4.45, 4.20]
    line [23.28, 10.29, 8.86, 4.45, 4.20]

Рис. 1.16.

Практичне завдання 2

1. Застосовуючи розширений синтаксис відображення фігур, розробити алгоритм моніторингу інформаційних повідомлень у відкритих ресурсах мережі інтернет.
2. Згенерувати випадкові значення та побудувати графіки (діаграму та круговий) розподілу кількості повідомлень за 5 тематиками у відсотках.

Нижче приведена діаграма типу sequenceDiagram. За допомогою неї, наприклад, можна писати сценарій радіопереговорів між групами при плануванні радіогри.

sequenceDiagram
    box LightGray Unit A
    participant A as Chief A
    participant J as Member A
    end
    box LightBlue Unit B
    participant C as Chief B
    participant D as Member B
    end
    A->>J: Hello John, how are you?
    J->>A: Great!
    A->>C: Hello Bob, how is Charley?
    D->>C: Hello Charley, how are you?

Рис. 1.16.

Завдання на самостійну підготовку

1. Розробити текст та сценарій радіогри для відділення.
2. Оформити документ з описом у форматі Markdown та діаграмою типу sequenceDiagram.
3. Включити у текст документа таблицю з відповідником: "позивний - прізвище"